<style lang="less">
	page{
		background: #f6f6f6;
	}
	.content {
		margin: 0;
	  padding: 0 30upx;
	  box-sizing: border-box;
	}
	.main{
	  position: fixed;
	  z-index: 100;
	  top: 0;
	  width: 100%;
	  height: 100upx;
	  left: 0;
	  box-sizing: border-box;
	  padding: 10upx 0;
	  background: #ffffff;
	}
	.serch_sousuo {
	  display: flex;
	  align-items: center;
	  border-radius: 4upx;
	  color: #333;
	  width: 80%;
	  margin: 0 auto;
	  background: #efefef;
	  padding: 5upx 20upx;
	  height: 65upx;
	  .search_input {
	    font-size: 28upx;
	    width: 85%;
	  }
	  .search_fl{
	  	width: 30upx;
	  	margin-right: 10upx;
	    height: auto;
	  }
	  .search_fr{
	  	width: 20upx;
	  	margin: 0 0 0 10upx;
	    height: auto;
	  }
	}
	.search {
	  align-items: center;
	  display: flex;
	  margin: 0 auto;
	  width: 100%;
	  .serch_content {
	    display: flex;
	    align-items: center;
	    border-radius: 4upx;
	    color: #333;
	    width: 560upx;
	    background: #efefef;
	    padding: 5upx 20upx;
	    height: 65upx;
	    .search_input {
	      font-size: 28upx;
	      width: 85%;
	    }
	  }
		.search_fl{
			width: 30upx;
	    height: auto;
			margin-right: 10upx;
		}
		.search_fr{
			width: 40upx;
	    height: auto;
			margin: 0 0 0 10upx;
		}
	  .icon-search {
	    font-size: 40upx;
	  }
	  .btn {
	    width: 100upx;
	    margin-left: 20upx;
	    height: 65upx;
	    font-size: 30upx;
	    line-height: 65upx;
	    padding-left: 5upx;
	    padding-right: 5upx;
	    background: #333333;
	    border: none;
	    // color:rgba(51,51,51,1);
	    color: #ffffff;
	  }
	  button::after {
	    border: none;
	  }
	  .icon-del {
	    height: 60upx;
	    line-height: 60upx;
	    width: 60upx;
	    font-size: 40upx;
	  }
	}
	.tab-content_main{
		margin-top: 100upx;
		overflow: hidden; 
		width: 100%;
	}
	.main_list{
		overflow: hidden;
		font-size: 28upx;
	  background: #ffffff;
	  padding: 20upx 30upx;
	  box-sizing: border-box;
		margin-top: 20upx;
		.main_list_top{
			border-bottom: 1px solid #ededed;
			padding: 0 0 15upx;
	    .list_top{
	      overflow: hidden;
	      	.main_list_top_fl{
	      	float: left;
	        font-size:26upx;
	        font-weight:bold;
	        color:rgba(51,51,51,1);
	        line-height:36upx;
	        .copy{
	          width: 36upx;
	          height:auto;
	          margin-left: 30upx;
	        }
	      }
	      .main_list_top_fr{
	      	float: right;
	        font-size:26upx;
	        color:rgba(219,193,145,1);
	        line-height:36upx;
	      }
	    }
		}
	
		.main_list_centent{
			.main_list_centent_list{
				overflow: hidden;
				border-bottom: 1px solid #ededed;
				padding: 20upx 0;
				.main_list_centent_fl{
					float: left;
					width: 136upx;
					max-height: 136upx;
					border:1px solid #ededed;
				}
				.main_list_centent_fr{
					width: calc(100% - 166upx);
					overflow: hidden;
					float: right;
					margin-left: 10upx;
					.main_list_centent_fr_name{
						overflow:hidden;
						text-overflow:ellipsis;
						line-height: 36upx;
						height: 72upx;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
					}
					.main_list_centent_fr_money{
					  overflow: hidden;
					  margin-top: 30upx;
					  .fr_money{
					    float: left;
					    font-size:30upx;
					    font-family:'DINCond';
					    font-weight:400;
					    color:rgba(51,51,51,1);
						display: flex;
						align-items: center;
						.costPoint{
						  background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
						  background-size: 24upx;
						  padding-left: 30upx;
						   font-size:34upx;
						   font-family:'DINCond';
						   font-weight:400;
						   color:rgba(219,194,145,1);
						   margin-right: 8upx;
						}
						.realPrice{
						  color:rgba(233,50,70,1);
						}
						.goodsNums{
						   color:rgba(153,153,153,1);
						 }
						.goodsNums.tes{
						  margin-left: 10upx;
						  transform: rotate(45deg);
						}
				  }
					  .zhuangtai{
						float: right;
						font-size:24upx;
						color:rgba(153,153,153,1);
						line-height:36upx;
					  }
					}
				}
			}
		}
		.main_list_bot{
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #ededed;
			padding: 10upx 0;
			.main_list_bot_fl{
				display: flex;
				text-align: left;
				width: 50%;
			}
			.main_list_bot_fr{
				width: 50%;
				.shouyi{
					display: flex;
					justify-content: flex-end;
					.shouyi-fl{
						margin-right: 8upx;
					}
					.shouyi-fr-jifen{
						background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
						background-size: 24upx;
						padding-left: 30upx;
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(219,194,145,1);
					}
					.shouyi-fr-jie{
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(51,51,51,1);
					}
					.shouyi-fr-jingdan{
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						display: flex;
						color:rgba(233,50,70,1);
						.jifen{
							background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
							background-size: 24upx;
							padding-left: 30upx;
							font-size:30upx;
							font-family:'DINCond';
							font-weight:400;
							color:rgba(219,194,145,1);
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.btn{
			text-align: right;
			margin-top: 20upx;
			
			text{
				display: inline-block;
				padding: 0 20upx;
				line-height: 56upx;
				border: 1px solid #070506;
				border-radius:28upx;
				font-size:24upx;
				color:rgba(7,5,6,1);
			}
		}
		.main_list_bot:last-child{
			border: none;
		}
	}
</style>
<template>
	<view>
	   <view class="main" v-if="isShow==true">
			<view class="content">
			  <view class="search">
				<view class="serch_content">
					<image src="/static/img/ic_search.png" class="search_fl" mode="widthFix"></image>
				    <input type="text" name="search_input" @input="searchInput" class="search_input" focus="true" :value="search_input_value" confirm-type="search" placeholder="请输入商品名称、订单号、收件姓名、电话" placeholder-style="font-size:22upx"/>
				    <image v-if="search_input_value!=''" src="https://static.xpandago.net/wechat/images/search_closed%402x.png"  @tap="delText" class="search_fr" mode="widthFix"></image>
				</view>
				<button class="btn btn_cancel" @tap="goBack()" v-if="search_input_value==''">取消</button>
				<button class="btn btn_search" @tap="search()" v-else>搜索</button>
			  </view>
			</view>
	   </view>
	   <view class="main" v-else-if="isShow==false">
		  <view class="serch_sousuo" @tap.stop="sousuo">
			<image src="/static/img/ic_search.png" class="search_fl" mode="widthFix"></image>
			 <view class="search_input">{{search_input_value}}</view>
			<image src="/static/img/ic_login_close.png" class="search_fr" mode="widthFix"></image>
		  </view>
	   </view>
		<view class="tab-content_main" v-if="isShow==false">
		  <view class="main_list" v-for="(item,i) in list" @tap="orderInfo(item.orginOrderNo,item.jumpButton)">
		      <view class="main_list_top">
		        <view class="list_top">
		          <view class="main_list_top_fl">
		            订单号:{{item.orderNo}}
					<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(item.orginOrderNo)" mode="widthFix"></image>
		          </view>
		          <view class="main_list_top_fr">
		            {{item.orderState}}
		          </view>
		        </view>
		      </view>
		      <view class="main_list_centent">
		        <view class="main_list_centent_list" v-for="(newitem,i) in item.commodityInfoList">
		          <image :src= "'https://static.xpandago.net'+'/'+newitem.goodImg" class="main_list_centent_fl" mode="widthFix"></image>
		          <view class="main_list_centent_fr">
		            <view class="main_list_centent_fr_name">
		              {{newitem.goodsName}}
		            </view>
		            <view class="main_list_centent_fr_money">
		              <view class="fr_money" v-if="newitem.costPoint!='' && newitem.costPoint!=null && newitem.costPoint>0">
		                <text class="costPoint">{{newitem.costPoint}}</text>
		                <text> + ¥ {{newitem.realPrice}}</text>
		                <text class="goodsNums tes">+</text>
		                <text class="goodsNums">{{newitem.goodsNums}}</text>
		              </view>
		            <view class="fr_money" v-else>
		                <view>¥{{newitem.realPrice}}</view>
		                <text class="goodsNums tes">+</text>
		                <text class="goodsNums">{{newitem.goodsNums}}</text>
		              </view>
		              <view class="zhuangtai" v-if="newitem.goodsState==1">售后中</view>
		              <view class="zhuangtai" v-else-if="newitem.goodsState==2">售后成功</view>
		            </view>
		          </view>
		        </view>
		      </view>
		     <view class="main_list_bot">
				 <view class="main_list_bot_fl">共{{item.commoditySum}}件</view>
				 <view class="main_list_bot_fr">
					 <view class="shouyi" v-if="item.goodsTotalPoint!='' && item.goodsTotalPoint!=null && item.goodsTotalPoint!=0">
						 <view class="shouyi-fl">积分收益:</view>
						 <view class="shouyi-fr-jifen">{{item.goodsTotalPoint}}</view>
					 </view>
					 <view class="shouyi">
						 <view class="shouyi-fl">预计收益:</view>
						 <view class="shouyi-fr-jie">¥ {{item.estimatedIncome}}</view>
					 </view>
				 </view>
		      </view>
			  <view class="main_list_bot">
				 <view class="main_list_bot_fl">
					<view class="userName" v-if="item.jumpButton != 1">下单人： {{item.userName}} {{item.userPhone}}</view>
				 </view>
				 <view class="main_list_bot_fr">
					 <view class="shouyi">
						 <view class="shouyi-fl">订单总额:</view>
						 <view class="shouyi-fr-jingdan"><view class="jifen" v-if="item.costPoint>0 && item.costPoint!=null">{{item.costPoint}} +</view>¥ {{item.orderTotal}}</view>
					 </view>
				 </view>
			   </view>
			   <view class="btn" v-if="item.btnWl == 1">
				   <text @tap.stop="openLogistics(item.orderId)">查看物流</text>
			   </view>
		  </view>
		  <view class="uni-loadmore" v-if="showLoadMore==true">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import segmentedControl from '@/components/segmented-control';
	export default {
		components: {
			segmentedControl
		},
		data() {
			return {
				list:[],
				current: 0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				totalPage:'',//总页数
				page:1,
				search_input_value: '',
				show : 1,
				status:'',
				token:'',
				isShow:true
			}
		},
		onLoad() {
			this.token=uni.getStorageSync('token')
			// this.newList(this.page)
		},
		onReachBottom() {
			this.showLoadMore = true;
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				this.loadMoreText = "加载中..."
				setTimeout(() => {
					this.page++
					this.newList(this.page)
				}, 500);
			}
		},
		methods: {
			openLogistics(orderId){
				uni.navigateTo({
				  url: "/pages/datail/logistics?orderId=" + orderId
				})
			},
			delText() {
			  this.search_input_value = "";
			},
			searchInput(e) {
			  this.search_input_value = e.detail.value;
			},
			goBack() {
			  uni.navigateBack({
			    delta: 1 // 回退前 delta(默认为1) 页面
			
			  })
			},
			sousuo(){
			  this.isShow=true;
			  this.list=[];
			},
			search() {
				this.current=0
				this.page=1
				this.list=[]
				this.status=''
				this.isShow=false;
				this.newList(this.page)
			},
			//跳转详情
			orderInfo(orderNo,jumpButton){
				if(jumpButton == 1){
					return false
				}
				uni.navigateTo({
				  url: "/pages/datail/orderDetailsInfo?orderNo="+orderNo
				})
			},
			async newList(page){
				const [err, res] = await api.orderDetailsList({
					query: {
						status:this.status,
						page: page,
						keyword: this.search_input_value,
						limit:10
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					  this.list = [...this.list, ...res.data.data.list];
					  this.totalPage=res.data.data.totalPage
					  if(this.list.length==0){
					 	  this.loadMoreText = "暂无数据!"
					 	 this.showLoadMore = true;
					 }else{
					 	this.showLoadMore = false; 
					 }
				 }
			},
			//复制粘贴
			copy(copy){
			  uni.setClipboardData({
			    data:copy,
			    success (res) {
			      uni.showToast({
			        title: '复制成功',
			        icon:"none"
			      })
			    }
			  })
			}
		}
	}
</script>
